<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-04 21:52:10
 * @LastEditTime: 2024-11-08 20:25:19
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\UUID\page\entry\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="pageWrap">
    <div class="tabs">
      <a-space>
        <a-radio-group v-model:value="data.options.type" button-style="solid">
          <a-radio-button value="UUID1">UUID1</a-radio-button>
          <a-radio-button value="UUID3">UUID3</a-radio-button>
          <a-radio-button value="UUID4">UUID4</a-radio-button>
          <a-radio-button value="UUID5">UUID5</a-radio-button>
          <a-radio-button value="UUID6">UUID6</a-radio-button>
          <a-radio-button value="UUID7">UUID7</a-radio-button>
        </a-radio-group>
        <a-input-number v-model:value="data.options.number" prefix="数量：" style="width: 120px;" />
        <a-checkbox v-model:checked="data.options.notMiddleLine" style="">不带-</a-checkbox>
        <a-button type="primary" @click="handleGenerate">生成</a-button>
        <a-button @click="handleCopy">复制</a-button>
      </a-space>
    </div>
    <div class="inputBox">
    </div>
    <div class="content">
      <div v-for="(item, index) in data.resultList" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { v1 as uuidv1, v3 as uuidv3, v4 as  uuidv4, v5 as uuidv5, v6 as uuidv6, v7 as uuidv7 } from 'uuid'

import { message } from 'ant-design-vue'

const data = reactive({
  options: {
    type: 'UUID1',
    number: 10,
    notMiddleLine: false
  },
  resultList: []
})

// 生成
const handleGenerate = () => {
  data.resultList = []
  for (let i = 0; i < data.options.number; i++) {
    if (data.options.type === 'UUID1') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv1())
      } else {
        data.resultList.push(uuidv1().replaceAll('-', ''))
      }
    }
    if (data.options.type === 'UUID3') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv3(uuidv1(), uuidv5.URL))
      } else {
        data.resultList.push(uuidv3(uuidv1(), uuidv5.URL.replaceAll('-', '')))
      }
    }
    if (data.options.type === 'UUID4') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv4())
      } else {
        data.resultList.push(uuidv4().replaceAll('-', ''))
      }
    }
    if (data.options.type === 'UUID5') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv5(uuidv1(), uuidv5.URL))
      } else {
        data.resultList.push(uuidv5(uuidv1(), uuidv5.URL).replaceAll('-', ''))
      }
    }
    if (data.options.type === 'UUID6') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv6())
      } else {
        data.resultList.push(uuidv6().replaceAll('-', ''))
      }
    }
    if (data.options.type === 'UUID7') {
      if (!data.options.notMiddleLine) {
        data.resultList.push(uuidv7())
      } else {
        data.resultList.push(uuidv7().replaceAll('-', ''))
      }
    }
  }
}

// 复制
const handleCopy = async () => {
  try {
    let textToCopy = ''
    for (let i = 0; i < data.resultList.length; i++) {
      textToCopy += `${data.resultList[i]}\r\n`
    }
    await navigator.clipboard.writeText(textToCopy)
    message.success(`文本已复制到剪贴板`)
  } catch (error) {
    message.error(`复制到剪贴板失败：${error}`)
  }
}

</script>

<style lang="scss" scoped>
.pageWrap {
  .content{
    margin: 16px;
    line-height: 1.5em;
  }
}
</style>